import { renderComponent, renderSnippet } from "$lib/components/ui/data-table";
import type { Space } from "$lib/core";
import type { ColumnDef } from "@tanstack/table-core";
import CellActionEnter from "./cell-action-enter.svelte";
import { createRawSnippet } from "svelte";
import CellActionDel from "./cell-action-del.svelte";

// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.
export const getShape = (
  userId: number,
  delSpace: (spaceId: number) => void,
  enterSpace: (space: Space) => void,
) => {
  let columns = [
    {
      id: "name",
      header: "课程名称",
      size: 100,
      cell: ({ row }) => {
        const rawSnippet = createRawSnippet<[string]>((getText) => {
          const text = getText();
          return {
            render: () =>
              `<div class="max-w-[100px] overflow-hidden text-ellipsis">${text}</div>`,
          };
        });
        return renderSnippet(rawSnippet, row.original.name);
      },
    },
    {
      id: "desp",
      header: "课程内容",
      size: 300,
      cell: ({ row }) => {
        const rawSnippet = createRawSnippet<[string]>((getText) => {
          const text = getText();
          return {
            render: () =>
              `<div class="max-w-[300px] overflow-hidden text-ellipsis">${text}</div>`,
          };
        });
        return renderSnippet(rawSnippet, row.original.desp);
      },
    },
    {
      id: "owner_name",
      header: "讲师",
      size: 100,
      cell: ({ row }) => {
        const rawSnippet = createRawSnippet<[string]>((getText) => {
          const text = getText();
          return {
            render: () =>
              `<div class="max-w-[100px] overflow-hidden text-ellipsis">${text}</div>`,
          };
        });
        return renderSnippet(rawSnippet, row.original.owner_name);
      },
    },
    {
      id: "action_del",
      size: 40,
      cell: ({ row }) =>
        renderComponent(CellActionDel, {
          userId,
          ownerId: row.original.owner_id,
          delSpace: () => delSpace(row.original.id),
        }),
    },
    {
      id: "action_enter",
      size: 40,
      cell: ({ row }) =>
        renderComponent(CellActionEnter, {
          booking: row.original.booking,
          booking_status: row.original.booking_status,
          enterSpace: () => enterSpace(row.original),
        }),
    },
  ] as ColumnDef<Space>[];
  return { columns, count: columns.length };
};

export type FilterTyp = { value: string; label: string };
export const filterTyps: FilterTyp[] = [
  {
    value: "name",
    label: "课程名称",
  },
  {
    value: "desp",
    label: "课程内容",
  },
  {
    value: "owner_name",
    label: "讲师姓名",
  },
];
